<template>
  <!-- 举报管理 -->
  <div class="box">
    <heads></heads>
    <titlesearch></titlesearch>
    <div class="gerenBox">
      <ceList :index="6"></ceList>
      <div class="con">
        <div class="leibie">
          <div class="anniu">
            <div :class="leibie==0?'xuan':''" @click="leibieClick(0)">收到</div>
            <div :class="leibie==1?'xuan':''" @click="leibieClick(1)">发起</div>
          </div>
        </div>
        <div class="list">
          <div class="li" v-for="(item,index) in myjbList" :key="index">
            <div style="margin-top: 24px;">
              <p>举报内容：</p>
              <p style="width: 770px;">{{item.title}}</p>
            </div>
            <div>
              <p>举报原因：</p>
              <p style="width: 770px;">{{item.reportType}}({{item.reportContent}})</p>
            </div>
            <div>
              <p>举报时间：</p>
              <p style="width: 770px;">{{item.createDate}}</p>
            </div>
            <div style="width:200px;height: 200px;float: left;margin-top: 20px;">
              <img :src="item.image" style="height: 100%;">
            </div>
          </div>
        </div>
        <div class="fenye">
          <el-pagination
            @current-change="jbmyCurrentChange"
            background
            layout="prev, pager, next"
            :total="juBaoMytotal"
          	:page-size="juBaoMyPage.pageSize"
            :current-page="juBaoMyPage.PageNo"
          	style="text-align: center;margin-top: 100px;"
           v-if="leibie == 0"></el-pagination>
					 <el-pagination
					   @current-change="myjbCurrentChange"
					   background
					   layout="prev, pager, next"
					   :total="myjbtotal"
					 	:page-size="myJubaoPage.pageSize"
					   :current-page="myJubaoPage.PageNo"
					 	style="text-align: center;margin-top: 100px;"
					  v-else></el-pagination>
        </div>
      </div>
    </div>
    <floor></floor>
  </div>
</template>
<script>
import floor from "../../components/floor";
import heads from "../../components/head";
import ceList from "../../components/ceList.vue";
import titlesearch from "../../components/titlesearch.vue";
export default {
  components: {
    floor,
    heads,
		ceList,
		titlesearch,
  },
  data() {
    return {
      xuan: 6,
      leibie: 0,
			user:{},
			myJubaoPage:{
				pageNo:1,
				pageSize:4,
				userId:'',
			},
			myjbList:[],
			myjbtotal:0,
			juBaoMyPage:{
				pageNo:1,
				pageSize:4,
				userId:'',
			},
			juBaoMytotal:0,
    };
  },
  created() {
  	this.getUser()
  },
  methods: {
		getUser(){
			let user = JSON.parse(localStorage.getItem("userInfo"))
			if(user != null){
				this.loginstate = true
				this.user = user
				this.myJubaoPage.userId = user.id
				this.juBaoMyPage.userId = user.id
				this.getReportMyRecord()
			}else{
				this.loginstate = false
				this.$message({
				  message: "请登录！",
				  type: "error",
				  offset: 120,
				  duration: 2000,
				});
				this.$router.push("/");
			}
		},
		//我举报的
		getMyReportRecord(){
			this.$getHttp('/mob/user/getMyReportRecord',this.myJubaoPage).then((data) =>{
				if(data.code == 200){
					this.myjbList = data.page.list
					this.myjbtotal = data.page.count
				}
			})
		},
		//举报我的
		getReportMyRecord(){
			this.$getHttp('/mob/user/getReportMyRecord',this.juBaoMyPage).then((data) =>{
				if(data.code == 200){
					this.myjbList = data.page.list
					this.juBaoMytotal = data.page.count
				}
			})
		},
    xuanClick(num) {
      this.xuan = num;
			switch(num){
				case 1:
					this.$router.push({
						path:"/my/index",
					})
				break;
				case 3:
					this.$router.push({
						path:"/my/bbcz/bbczpersonal",
					})
				break;
				case 4:
					this.$router.push({
						path:"/my/collect",
					})
				break;
				case 5:
					this.$router.push({
						path:"/my/browsing",
					})
				break;
				case 6:
					this.$router.push({
						path:"/my/inform",
					})
				break;
				case 8:
					this.$router.push({
						path:"/my/bbcz/bbczpersonal",
					})
				break;
				case 10:
					this.$router.push({
						path:"/my/instrument",
					})
				break;
			}
    },
		myjbCurrentChange(e){
			this.myJubaoPage.pageNo = e
			this.getMyReportRecord()
			
		},
		jbmyCurrentChange(e){
			this.juBaoMyPage.pageNo = e
			this.getReportMyRecord()
		},
    leibieClick(num) {
      this.leibie = num;
			this.myJubaoPage.pageNo = 1
			this.juBaoMyPage.pageNo = 1
			if(num == 0){
				this.getReportMyRecord()
			}else{
				this.getMyReportRecord()
			}
    }
  }
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  padding-bottom: 200px;
}
.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 940px;
  color: #333;
  border: 1px solid #e0e0e0;
  .leibie {
    position: relative;
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #e0e0e0;
    .anniu {
      position: absolute;
      left: 34px;
      bottom: 28px;
      div {
        display: inline-block;
        margin-right: 54px;
        font-size: 20px;
        cursor: pointer;
      }
      .xuan {
        transform: scale(1.2);
        color: #64b6a8;
      }
    }
    span {
      display: inline-block;
      position: absolute;
      width: 70px;
      height: 34px;
      background: #e0e0e0;
      border-radius: 22px;
      text-align: center;
      line-height: 34px;
      color: #333;
      top: 22px;
      right: 20px;
      cursor: pointer;
    }
  }
  .list {
    margin-top: 33px;
    .li {
      width: 100%;
      height: 347px;
      border-bottom: 10px solid #f2f2f2;
      div {
        margin-left: 32px;
        p {
          display: inline-block;
          vertical-align: top;
          font-size: 18px;
          margin-top: 12px;
        }
      }
    }
  }
  .fenye {
    width: 100%;
    height: 50px;
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}
.gerenBox {
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: 32px;
  margin-bottom: 45px;
  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }
    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }
    .list {
      position: relative;
      width: 100%;
      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
      }
      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }
    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;
  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;
    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
    }
    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;
      img {
        width: 60px;
        height: 60px;
      }
      span {
        vertical-align: middle;
      }
    }
    .rig {
      position: absolute;
      right: 0;
      .sousuo {
        position: relative;
        display: block;
        width: 380px;
        height: 50px;
        background: #ffffff;
        border-radius: 4px;
        font-size: 18px;
        overflow: hidden;
        display: inline-block;
        input {
          width: 300px;
          height: 55px;
          line-height: 55px;
          text-indent: 16px;
          font-size: 18px;
        }
        img {
          width: 25px;
          height: 25px;
          margin-left: 20px;
          cursor: pointer;
        }
        p {
          position: absolute;
          top: 0;
          right: 0;
          width: 80px;
          height: 55px;
          background-color: #64b6a8;
          text-align: center;
          line-height: 55px;
          font-size: 24px;
          cursor: pointer;
          color: #ffffff;
        }
      }
      .but {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin-left: 30px;
      }
    }
  }
}
</style>